<template>
  <div>
    <h3>About page</h3>
    <ul>
      <!-- <li><router-link :to="{name: 'Home'}">Home</router-link></li> -->
      <li v-for="(item,index) of menuList" :key="index"><router-link :to="{name: item.urlName}">{{item.name}}</router-link></li>
    </ul>
    <div>vuexTest</div>
    <div>
    userInfo:{{JSON.stringify(this.userInfo)}}<br>
    AccessToken:{{this.accessToken}}<br>
    testMapState:{{this.testMapState}}
    </div>
    <h3>图片懒加载</h3>
    <div v-lazy-container="{ selector: 'img' }">
      <img v-for="(img, index) in imgList" :key="index" :data-src="img">
    </div>

    <ul class="img-ul">
      <li v-for="(img, index) in imgList" :key="index">
        <img v-lazy="img" >
      </li>
    </ul>
  </div>
</template>
<script>
import apis from '../apis';
import { mapGetters, mapMutations,mapActions,mapState  } from 'vuex';
export default {
  name: "about",
  data(){
    return {
      menuList:[],
      imgList:[
        "http://a3.att.hudong.com/68/61/300000839764127060614318218_950.jpg",
        "http://a0.att.hudong.com/78/52/01200000123847134434529793168.jpg",
        "http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg",
        "http://a4.att.hudong.com/21/09/01200000026352136359091694357.jpg",
        "http://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b999a9014c086e06b273602204087bf40bd1cb84.jpg",
        "http://dl.ppt123.net/pptbj/51/20181115/mzj0ghw2xo2.jpg",
        "http://a0.att.hudong.com/64/76/20300001349415131407760417677.jpg",
        "http://bbs.lyd.com.cn/data/attachment/forum/dvbbs/2009-10/2009102511405945827.jpg",
        "http://b-ssl.duitang.com/uploads/item/201407/04/20140704170747_UhcVH.thumb.700_0.jpeg",
        "http://i.serengeseba.com/uploads/i_3_2651655446x516067219_15.jpg"
      ]
    }
  },
  computed:{
    ...mapGetters(['userInfo']),
    ...mapGetters('login', {
      accessToken: 'getToken'
    }),
    ...mapState({
      testMapState: state => state.login.testMapState
    })
  },
  created(){
    this.$http.getByCache(apis.menu.getMenuList,{
      params: {test:1}
    }, {time: 3000}).then((res)=>{
      if(res.data.success){
        this.menuList = res.data.menuList;
      }
    })
    this.updataUserTest();
  },
  methods:{
    ...mapMutations('login', ['updateAccessToken']),
    ...mapMutations(['updateUserInfo']),
    ...mapActions('login', ['updateToken']),
    updataUserTest(){
      this.updateUserInfo({userName:"liuxin",userId:'123456'})
      this.updateToken("fdkfjdskfjsdkffjksdfjd")
      this.updateAccessToken("fdkfjdskfjsdkffjksdfjd")
    }
  }
}
</script>
<style lang="scss" scoped>
.img-ul{
  display: flex;
  flex-wrap: wrap;
  padding: 0  ;
  li{
    width: 50%;
    list-style-type: none;
    img{
      width: 100%;
    }
  }
}
img{
  width: 50%;
  height: 400px;
}
</style>